<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Vue is so easy</h2>
      <h2 v-bind:data-number="number" v-on:click="countAdd" v-once>
        number = {{number}}
      </h2>
      <!-- <h2 v-once>msg -{{msg}}</h2> -->
      <div>
        <input type="text" v-bind:value="msg" v-on:input="changeMsg" />
        <input type="text" v-model="msg" />
      </div>
      <h2>text(数据双向绑定) -- {{text}}</h2>
      <p>
        <input type="text" v-model="text" />
      </p>
      <h3>{{word}}</h3>
      <p>
        <a v-bind:href="href">百度一下</a>
      </p>
      <div v-if="flag">
        <img
          v-bind:src="img"
          alt=""
          width="200"
          height="200"
          v-bind:title="title"
        />
      </div>
      <div v-show="flag">
        <h2>v-show 才是真的样式切换导致的显示和隐藏</h2>
      </div>
      <button v-on:click="changeFlag">点击切换flag</button>
      <button v-on:click="change">切换图片</button>
      <div>
        <h2 v-for="(item,index) in list" :key="index">{{item}} - {{index}}</h2>
      </div>
      <div v-text="word"></div>
      <div v-html="html"></div>
    </div>

    <hr />
    <div id="demo">
      <h2>demo - demo -demo</h2>
      <h2>count - {{count}}</h2>
      <h2>message - {{message}}</h2>
      <h2>tips -- {{tips}}</h2>
    </div>
  </body>
  <script>
    // console.log(Vue);
    const vm = new Vue({
      el: "#app",
      data: {
        number: 2116,
        msg: "wh2116 - goodgoodstudy,daydayup",
        img: "http://47.104.209.44/base/imgs/1.jpg",
        text: "学好Vue",
        href: "http://www.baidu.com",
        word: "Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
        flag: true,
        title: "Are you OK?",
        list: ["裤子", "风衣", "香水", "鞋子"],
        html: "<h2>wh2116 - 精通Vue所有 </h2>",
      },
      methods: {
        countAdd() {
          this.number++;
        },

        changeMsg(e) {
          this.msg = e.target.value;
        },
        changeFlag() {
          this.flag = !this.flag;
        },
        change() {
          this.img = "http://47.104.209.44/base/imgs/11.jpg";
        },
      },
    });
    function Demo(options) {
      this.options = options;
      this.el = this.options.el;
      this.data = this.options.data;
      this.rootEle = document.querySelectorAll(this.el)[0];
      this.init = function () {
        console.log("init");
        for (var key in this.data) {
          this[key] = this.data[key];
          this.rootEle.innerHTML = this.rootEle.innerHTML.replace(
            new RegExp("{{" + key + "}}"),
            this[key]
          );
        }
      };
      this.init();
    }
    var de = new Demo({
      el: "#demo",
      data: {
        count: 1314,
        message: "Are you OK?",
        tips: "2116 天道酬勤",
      },
    });
  </script>
</html>
